/// &lt;reference types="node" /&gt;
import { useTranslation } from "react-i18next";
import { LanguageSwitcher } from "./LanguageSwitcher";
import { useState, useEffect, useRef } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { Link, useNavigate } from "react-router-dom";

export function Header() {
  const { t } = useTranslation();
  const [isScrolled, setIsScrolled] = useState(false);
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const [activeDropdown, setActiveDropdown] = useState<string | null>(null);
  const dropdownRef = useRef<HTMLDivElement>(null);
  const navigate = useNavigate();
  const closeTimeoutRef = useRef<number | null>(null);

  // Handle scroll effect
  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 10);
    };

    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  // Close dropdown when clicking outside
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (
        dropdownRef.current &&
        !dropdownRef.current.contains(event.target as Node)
      ) {
        setActiveDropdown(null);
      }
    };

    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, []);

  // Toggle dropdown
  const toggleDropdown = (dropdownName: string) => {
    setActiveDropdown(activeDropdown === dropdownName ? null : dropdownName);
  };

  // Close all dropdowns
  const closeAllDropdowns = () => {
    // 添加延迟关闭，允许鼠标从主菜单移动到子菜单
    if (closeTimeoutRef.current) {
      clearTimeout(closeTimeoutRef.current);
    }

    closeTimeoutRef.current = setTimeout(() => {
      setActiveDropdown(null);
    }, 300);
  };

  const cancelCloseDropdown = () => {
    if (closeTimeoutRef.current) {
      clearTimeout(closeTimeoutRef.current);
      closeTimeoutRef.current = null;
    }
  };

  return (
    <header
      className={`sticky top-0 z-50 transition-all duration-300 ${
        isScrolled
          ? "bg-white shadow-md py-2 md:py-2"
          : "bg-transparent py-4 md:py-4"
      } px-4 md:px-0`}
    >
      <div className="container mx-auto">
        <div className="flex justify-between items-center" ref={dropdownRef}>
          {/* Logo */}
          <div className="flex items-center space-x-2">
            <div className="w-12 h-12 flex items-center justify-center">
              <img
                src="/memapay-logo.png"
                alt="豆豆Pay Logo"
                className="w-full h-full"
              />
            </div>
            <h1 className="text-xl font-bold text-gray-900">
              {t("header.logo")}
            </h1>
          </div>

          {/* Desktop Navigation */}
          <nav className="hidden md:flex items-center space-x-2">
            {/* Home */}
            <Link
              to="/"
              className="px-5 py-2 text-gray-700 hover:text-blue-500 transition-colors whitespace-nowrap"
              onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
            >
              {t("header.home")}
            </Link>
            {/* Digital Payment Dropdown */}
            <div className="relative group">
              <button
                className="flex items-center px-5 py-3 text-gray-700 hover:text-blue-500 transition-colors whitespace-nowrap"
                onMouseEnter={() => {
                  cancelCloseDropdown();
                  toggleDropdown("digitalPayment");
                }}
                onMouseLeave={closeAllDropdowns}
              >
                {t("header.digitalPayment")}
                <i className="fa-solid fa-chevron-down ml-1 text-xs"></i>
              </button>
              <AnimatePresence>
                {activeDropdown === "digitalPayment" && (
                  <motion.div
                    initial={{ opacity: 0, y: 5 }}
                    animate={{ opacity: 1, y: 0 }}
                    exit={{ opacity: 0, y: 5 }}
                    className="absolute top-full left-0 mt-0 w-56 bg-white shadow-lg rounded-md overflow-hidden z-50 border-t border-gray-100"
                    onMouseEnter={cancelCloseDropdown}
                    onMouseLeave={closeAllDropdowns}
                  >
                    <Link
                      to="/payment-collection"
                      className="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-500 transition-colors"
                      onClick={() =>
                        window.scrollTo({ top: 0, behavior: "smooth" })
                      }
                    >
                      {t("header.paymentCollection")}
                    </Link>
                    <Link
                      to="/cross-border-payment"
                      className="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-500 transition-colors"
                      onClick={() =>
                        window.scrollTo({ top: 0, behavior: "smooth" })
                      }
                    >
                      {t("header.crossBorderPayment")}
                    </Link>
                    <Link
                      to="/foreign-card-service"
                      className="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-500 transition-colors"
                      onClick={() =>
                        window.scrollTo({ top: 0, behavior: "smooth" })
                      }
                    >
                      {t("header.foreignCardService")}
                    </Link>
                  </motion.div>
                )}
              </AnimatePresence>
            </div>

            {/* Solutions Dropdown */}
            <div className="relative group">
              <button
                className="flex items-center px-5 py-3 text-gray-700 hover:text-blue-500 transition-colors whitespace-nowrap"
                onMouseEnter={() => {
                  cancelCloseDropdown();
                  toggleDropdown("solutions");
                }}
                onMouseLeave={closeAllDropdowns}
              >
                {t("header.solutions")}
                <i className="fa-solid fa-chevron-down ml-1 text-xs"></i>
              </button>
              <AnimatePresence>
                {activeDropdown === "solutions" && (
                  <motion.div
                    initial={{ opacity: 0, y: 5 }}
                    animate={{ opacity: 1, y: 0 }}
                    exit={{ opacity: 0, y: 5 }}
                    className="absolute top-full left-0 mt-0 w-48 bg-white shadow-lg rounded-md overflow-hidden z-50 border-t border-gray-100"
                    onMouseEnter={cancelCloseDropdown}
                    onMouseLeave={closeAllDropdowns}
                  >
                    <Link
                      to="/solutions/vertical-industry"
                      className="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-500 transition-colors"
                      onClick={() =>
                        window.scrollTo({ top: 0, behavior: "smooth" })
                      }
                    >
                      {t("header.verticalIndustries")}
                    </Link>
                    <Link
                      to="/solutions/retail-store"
                      className="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-500 transition-colors"
                      onClick={() =>
                        window.scrollTo({ top: 0, behavior: "smooth" })
                      }
                    >
                      {t("header.retailStores")}
                    </Link>
                    <Link
                      to="/solutions/small-bank"
                      className="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-500 transition-colors"
                      onClick={() =>
                        window.scrollTo({ top: 0, behavior: "smooth" })
                      }
                    >
                      {t("header.smallBanks")}
                    </Link>
                  </motion.div>
                )}
              </AnimatePresence>
            </div>

            {/* Investor Relations Dropdown */}
            {/* <div className="relative group">
              <button
                className="flex items-center px-5 py-3 text-gray-700 hover:text-blue-500 transition-colors whitespace-nowrap"
                onMouseEnter={() => {
                  cancelCloseDropdown();
                  toggleDropdown("investor");
                }}
                onMouseLeave={closeAllDropdowns}
              >
                <span>{t("header.investorRelations")}</span>
                <i className="fa-solid fa-chevron-down ml-1 text-xs"></i>
              </button>
              <AnimatePresence>
                {activeDropdown === "investor" && (
                  <motion.div
                    initial={{ opacity: 0, y: 5 }}
                    animate={{ opacity: 1, y: 0 }}
                    exit={{ opacity: 0, y: 5 }}
                    className="absolute top-full left-0 mt-0 w-56 bg-white shadow-lg rounded-md overflow-hidden z-50 border-t border-gray-100"
                    onMouseEnter={cancelCloseDropdown}
                    onMouseLeave={closeAllDropdowns}
                  >
                    <Link
                      to="/investor-relations/regular-reports"
                      className="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-500 transition-colors"
                      onClick={() =>
                        window.scrollTo({ top: 0, behavior: "smooth" })
                      }
                    >
                      {t("header.regularReports")}
                    </Link>
                    <Link
                      to="/investor-relations/activities"
                      className="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-500 transition-colors"
                      onClick={() =>
                        window.scrollTo({ top: 0, behavior: "smooth" })
                      }
                    >
                      {t("header.investorActivities")}
                    </Link>
                    <Link
                      to="/investor-relations/news"
                      className="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-500 transition-colors"
                      onClick={() =>
                        window.scrollTo({ top: 0, behavior: "smooth" })
                      }
                    >
                      {t("header.newsUpdates")}
                    </Link>
                  </motion.div>
                )}
              </AnimatePresence>
            </div> */}

            {/* News Center Dropdown */}
            {/* <div className="relative group">
              <button
                className="flex items-center px-5 py-3 text-gray-700 hover:text-blue-500 transition-colors whitespace-nowrap"
                onMouseEnter={() => {
                  cancelCloseDropdown();
                  toggleDropdown("news");
                }}
                onMouseLeave={closeAllDropdowns}
              >
                <span>{t("header.newsCenter")}</span>
                <i className="fa-solid fa-chevron-down ml-1 text-xs"></i>
              </button>
              <AnimatePresence>
                {activeDropdown === "news" && (
                  <motion.div
                    initial={{ opacity: 0, y: 5 }}
                    animate={{ opacity: 1, y: 0 }}
                    exit={{ opacity: 0, y: 5 }}
                    className="absolute top-full left-0 mt-0 w-56 bg-white shadow-lg rounded-md overflow-hidden z-50 border-t border-gray-100"
                    onMouseEnter={cancelCloseDropdown}
                    onMouseLeave={closeAllDropdowns}
                  >
                    <Link
                      to="/news-center/company"
                      className="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-500 transition-colors"
                      onClick={() =>
                        window.scrollTo({ top: 0, behavior: "smooth" })
                      }
                    >
                      {t("header.companyNews")}
                    </Link>
                    <Link
                      to="/news-center/media"
                      className="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-500 transition-colors"
                      onClick={() =>
                        window.scrollTo({ top: 0, behavior: "smooth" })
                      }
                    >
                      {t("header.mediaCoverage")}
                    </Link>
                    <Link
                      to="/news-center/resources"
                      className="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-500 transition-colors"
                      onClick={() =>
                        window.scrollTo({ top: 0, behavior: "smooth" })
                      }
                    >
                      {t("header.mediaResources")}
                    </Link>
                  </motion.div>
                )}
              </AnimatePresence>
            </div> */}

            {/* About DouDou Dropdown */}
            <div className="relative group">
              <button
                className="flex items-center px-5 py-3 text-gray-700 hover:text-blue-500 transition-colors whitespace-nowrap"
                onMouseEnter={() => {
                  cancelCloseDropdown();
                  toggleDropdown("about");
                }}
                onMouseLeave={closeAllDropdowns}
              >
                {t("header.aboutMamepay")}
                <i className="fa-solid fa-chevron-down ml-1 text-xs"></i>
              </button>
              <AnimatePresence>
                {activeDropdown === "about" && (
                  <motion.div
                    initial={{ opacity: 0, y: 5 }}
                    animate={{ opacity: 1, y: 0 }}
                    exit={{ opacity: 0, y: 5 }}
                    className="absolute top-full left-0 mt-0 w-56 bg-white shadow-lg rounded-md overflow-hidden z-50 border-t border-gray-100"
                    onMouseEnter={cancelCloseDropdown}
                    onMouseLeave={closeAllDropdowns}
                  >
                    <Link
                      to="/about/introduction"
                      className="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-500 transition-colors"
                      onClick={() =>
                        window.scrollTo({ top: 0, behavior: "smooth" })
                      }
                    >
                      {t("header.companyIntroduction")}
                    </Link>
                    <Link
                      to="/about/culture"
                      className="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-500 transition-colors"
                      onClick={() =>
                        window.scrollTo({ top: 0, behavior: "smooth" })
                      }
                    >
                      {t("header.corporateCulture")}
                    </Link>
                    <Link
                      to="/about/partners"
                      className="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-500 transition-colors"
                      onClick={() =>
                        window.scrollTo({ top: 0, behavior: "smooth" })
                      }
                    >
                      {t("header.partners")}
                    </Link>
                    <Link
                      to="/about/contact"
                      className="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-500 transition-colors"
                      onClick={() =>
                        window.scrollTo({ top: 0, behavior: "smooth" })
                      }
                    >
                      {t("header.contact")}
                    </Link>
                  </motion.div>
                )}
              </AnimatePresence>
            </div>
          </nav>

 
          <div className="hidden md:flex items-center space-x-4">
            <LanguageSwitcher />

            {/* <Link
              to="/app-download"
              className="px-4 py-2 text-gray-700 hover:text-blue-500 transition-colors"
              aria-label={t("header.appDownload")}
            >
              <i className="fa-solid fa-download"></i>
            </Link> */}
          </div>

          {/* Mobile header actions */}
          <div className="md:hidden flex items-center space-x-4">
            {/* Language Switcher */}
            <div className="flex items-center space-x-4">
              <LanguageSwitcher />
              {/* App Download */}
              <Link
                to="/app-download"
                className="text-gray-700 hover:text-blue-500 transition-colors"
                aria-label={t("header.appDownload")}
              >
                <i className="fa-solid fa-download"></i>
              </Link>
            </div>

            {/* Mobile menu button */}
            <button
              className="text-gray-700"
              onClick={() => {
                setMobileMenuOpen(!mobileMenuOpen);
                closeAllDropdowns();
              }}
            >
              <i className="fa-solid fa-bars text-xl"></i>
            </button>
          </div>
        </div>

        {/* Mobile Navigation */}
        {mobileMenuOpen && (
          <div className="md:hidden mt-4 pb-4 space-y-4">
            {/* Home */}
            <Link
              to="/"
              className="block text-gray-700 hover:text-blue-500 transition-colors"
              onClick={() => setMobileMenuOpen(false)}
            >
              {t("header.home")}
            </Link>
            {/* Digital Payment */}
            <div>
              <button
                onClick={(e) => {
                  e.stopPropagation();
                  toggleDropdown("mobileDigitalPayment");
                }}
                className="flex justify-between items-center w-full text-left text-gray-700 hover:text-blue-500 transition-colors"
              >
                <span>{t("header.digitalPayment")}</span>
                <i
                  className={`fa-solid fa-chevron-down text-xs transition-transform ${
                    activeDropdown === "mobileDigitalPayment"
                      ? "rotate-180"
                      : ""
                  }`}
                ></i>
              </button>
              {activeDropdown === "mobileDigitalPayment" && (
                <div className="pl-6 mt-2 space-y-2">
                  <Link
                    to="/payment-collection"
                    className="block px-4 py-2 text-gray-600 hover:text-blue-500 transition-colors"
                    onClick={() => setMobileMenuOpen(false)}
                  >
                    {t("header.paymentCollection")}
                  </Link>
                  <Link
                    to="/cross-border-payment"
                    className="block px-4 py-2 text-gray-600 hover:text-blue-500 transition-colors"
                    onClick={() => setMobileMenuOpen(false)}
                  >
                    {t("header.crossBorderPayment")}
                  </Link>
                  <Link
                    to="/foreign-card-service"
                    className="block px-4 py-2 text-gray-600 hover:text-blue-500 transition-colors"
                    onClick={() => setMobileMenuOpen(false)}
                  >
                    {t("header.foreignCardService")}
                  </Link>
                </div>
              )}
            </div>

            {/* Solutions */}
            <div>
              <button
                onClick={(e) => {
                  e.stopPropagation();
                  toggleDropdown("mobileSolutions");
                }}
                className="flex justify-between items-center w-full text-left text-gray-700 hover:text-blue-500 transition-colors"
              >
                <span>{t("header.solutions")}</span>
                <i
                  className={`fa-solid fa-chevron-down text-xs transition-transform ${
                    activeDropdown === "mobileSolutions" ? "rotate-180" : ""
                  }`}
                ></i>
              </button>
              {activeDropdown === "mobileSolutions" && (
                <div className="pl-6 mt-2 space-y-2">
                  <Link
                    to="/solutions/vertical-industry"
                    className="block text-gray-600 hover:text-blue-500 transition-colors"
                    onClick={() => setMobileMenuOpen(false)}
                  >
                    {t("header.verticalIndustries")}
                  </Link>
                  <Link
                    to="/solutions/retail-store"
                    className="block text-gray-600 hover:text-blue-500 transition-colors"
                    onClick={() => setMobileMenuOpen(false)}
                  >
                    {t("header.retailStores")}
                  </Link>
                  <Link
                    to="/solutions/small-bank"
                    className="block text-gray-600 hover:text-blue-500 transition-colors"
                    onClick={() => setMobileMenuOpen(false)}
                  >
                    {t("header.smallBanks")}
                  </Link>
                </div>
              )}
            </div>

            {/* Investor Relations */}
            <div>
              <button
                onClick={(e) => {
                  e.stopPropagation();
                  toggleDropdown("mobileInvestor");
                }}
                className="flex justify-between items-center w-full text-left text-gray-700 hover:text-blue-500 transition-colors"
              >
                <span>{t("header.investorRelations")}</span>
                <i
                  className={`fa-solid fa-chevron-down text-xs transition-transform ${
                    activeDropdown === "mobileInvestor" ? "rotate-180" : ""
                  }`}
                ></i>
              </button>
              {activeDropdown === "mobileInvestor" && (
                <div className="pl-6 mt-2 space-y-2">
                  <Link
                    to="/investor-relations/regular-reports"
                    className="block text-gray-600 hover:text-blue-500 transition-colors"
                    onClick={() => setMobileMenuOpen(false)}
                  >
                    {t("header.regularReports")}
                  </Link>
                  <Link
                    to="/investor-relations/activities"
                    className="block text-gray-600 hover:text-blue-500 transition-colors"
                    onClick={() => setMobileMenuOpen(false)}
                  >
                    {t("header.investorActivities")}
                  </Link>
                </div>
              )}
            </div>

            {/* News Center */}
            <div>
              <button
                onClick={(e) => {
                  e.stopPropagation();
                  toggleDropdown("mobileNews");
                }}
                className="flex justify-between items-center w-full text-left text-gray-700 hover:text-blue-500 transition-colors"
              >
                <span>{t("header.newsCenter")}</span>
                <i
                  className={`fa-solid fa-chevron-down text-xs transition-transform ${
                    activeDropdown === "mobileNews" ? "rotate-180" : ""
                  }`}
                ></i>
              </button>
              {activeDropdown === "mobileNews" && (
                <div className="pl-6 mt-2 space-y-2">
                  <Link
                    to="/news-center/company"
                    className="block text-gray-600 hover:text-blue-500 transition-colors"
                    onClick={() => setMobileMenuOpen(false)}
                  >
                    {t("header.companyNews")}
                  </Link>
                  <Link
                    to="/news-center/media"
                    className="block text-gray-600 hover:text-blue-500 transition-colors"
                    onClick={() => setMobileMenuOpen(false)}
                  >
                    {t("header.mediaCoverage")}
                  </Link>
                  <Link
                    to="/news-center/resources"
                    className="block text-gray-600 hover:text-blue-500 transition-colors"
                    onClick={() => setMobileMenuOpen(false)}
                  >
                    {t("header.mediaResources")}
                  </Link>
                </div>
              )}
            </div>

            {/* About */}
            <div>
              <button
                onClick={(e) => {
                  e.stopPropagation();
                  toggleDropdown("mobileAbout");
                }}
                className="flex justify-between items-center w-full text-left text-gray-700 hover:text-blue-500 transition-colors"
              >
                <span>{t("header.about")}</span>
                <i
                  className={`fa-solid fa-chevron-down text-xs transition-transform ${
                    activeDropdown === "mobileAbout" ? "rotate-180" : ""
                  }`}
                ></i>
              </button>
              {activeDropdown === "mobileAbout" && (
                <div className="pl-6 mt-2 space-y-2">
                  <Link
                    to="/about/introduction"
                    className="block text-gray-600 hover:text-blue-500 transition-colors"
                    onClick={() => setMobileMenuOpen(false)}
                  >
                    {t("header.companyIntroduction")}
                  </Link>
                  <Link
                    to="/about/culture"
                    className="block text-gray-600 hover:text-blue-500 transition-colors"
                    onClick={() => setMobileMenuOpen(false)}
                  >
                    {t("header.corporateCulture")}
                  </Link>
                  <Link
                    to="/about/partners"
                    className="block text-gray-600 hover:text-blue-500 transition-colors"
                    onClick={() => setMobileMenuOpen(false)}
                  >
                    {t("header.partners")}
                  </Link>
                  <Link
                    to="/about/contact"
                    className="block text-gray-600 hover:text-blue-500 transition-colors"
                    onClick={() => setMobileMenuOpen(false)}
                  >
                    {t("header.contact")}
                  </Link>
                </div>
              )}
            </div>
          </div>
        )}
      </div>
    </header>
  );
}
